<ion-header>
  <ion-toolbar class="orange-bar">
    <ion-buttons slot="start">
      <ion-button color="light" (click)="goBack()">
        <ion-icon name="ios-arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>出借</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label>
        <span class="custom-label">现在投资</span>
        <span class="content">J1148 融企403号</span>
      </ion-label>
    </ion-item>
    <ion-item detail (click)="openCardList()">
      <ion-label>
        <span class="custom-label">付款账号</span>
        <span class="content">{{cardInfo?.name}}</span>
      </ion-label>
    </ion-item>
    <ion-item>
      <ion-label class="custom-label">投资金额</ion-label>
      <ion-input type="number" maxlength="10"></ion-input>
      <ion-note slot="end" class="content">元</ion-note>
    </ion-item>
  </ion-list>
  <div padding>
    <ion-button expand="block" color="tertiary">确定</ion-button>
  </div>
</ion-content>
<!-- 银行卡选择面板 -->
<app-action-panel>
  <ion-list style="margin-bottom: 150px">
    <ion-item *ngFor="let data of dataList" (click)="changeCard(data)">
      <ion-label>{{data.name}}</ion-label>
      <ion-note slot="end" *ngIf="data.id === cardInfo.id">
        <ion-icon name="checkmark-circle" color="tertiary" style="font-size: 24px"></ion-icon>
      </ion-note>
    </ion-item>
    <ion-item detail (click)="addCard()">
      <ion-icon slot="start" name="add" color="tertiary" class="add-icon"></ion-icon>新增银行卡
    </ion-item>
  </ion-list>
</app-action-panel>